<template>
  <div class="storeproductattr-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="规格搜索：" name="keywords">
        <a-input v-model:value="searchParams.keywords" placeholder="请输入" />
      </a-form-item>
    </search-form>
    <div class="table-toolbar">
      <add-button @click="add()" />
      <a-button type="primary">批量删除</a-button>
    </div>
    <g-table ref="tableRef" :columns="columns" :api="getPageList" :params="searchParams" />

    <storeproductattrDetail v-model:visible="visible" :data="activeRow" @change="search(false)" />
  </div>
</template>

<script setup lang="tsx">
import { storeproductattrDel, getPageList } from './api';
import type { Istoreproductattr } from './entity';
import storeproductattrDetail from './detail.vue';

const searchParams = reactive({
  keywords: ''
})

let visible = $ref(false)

const { tableRef, columns, search } = useTable<Istoreproductattr>([
  { title: 'ID', dataIndex: 'id' },
  { title: '规格名称', dataIndex: 'ruleName' },
  {
    title: '商品规格', dataIndex: 'attr_values',
    customRender: ({ record }) => {
      return record.ruleValue.map((e: any, index: number) =>
        <span key={index} class="mr10" >{e.value}</span>
      )
    }
  },
  {
    title: '商品属性', dataIndex: 'attr_values',
    customRender: ({ record }) => {
      return record.ruleValue.map((e: any, index: number) =>
        <span key={index} class="mr10" >{e.detail.join(',')}</span>

      )
    }
  },
  {
    title: '操作',
    dataIndex: 'op',
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>删除</confirm-button>
      </>
    )
  }
])

let activeRow = $ref<Partial<Istoreproductattr>>({})
function add(row: Partial<Istoreproductattr> = {}) {
  activeRow = { ...row }
  visible = true
}

function remove({ id }: Istoreproductattr) {
  storeproductattrDel(id as number).then(() => {
    AntMessage.success('已删除')
    search(false)
  })
}
</script>

<style lang="scss"></style>